<template>
  <div class="sidebar" :class="{ 'folded': state === 'folded' }">

    <g-scrollbar class="sidebar-menu-content">

      <div class="sidebar-header">
        <div class="sidebar-header-logo">
          <a :href="path" target="_blank">
            <img :src="logo" alt="">
          </a>
        </div>
        <div class="sidebar-header-title">
          <div @click="go( 'Dashboard' )">{{platformName}}</div>
        </div>
      </div>

      <ul class="sidebar-menu" v-if="menu && menu.length > 0">
        <router-link v-for="item in menu" v-if="componentConf ? componentConf[item.show] : true" :to="`/${item.key}`" class="sidebar-menu-item" tag="li" active-class="selected" @click.native="select(item.key)" :event="item.key === selected ? '' : 'click'" :key="item.key">
          <div class="sidebar-menu-item-label">
            <div class="sidebar-menu-item-label-icon">
              <i v-if="item.name=='资源注册'|| item.name=='数据加工'||item.name=='服务中心'" class="iconfont" :class="'icon-' + item.icon"></i>
              <template v-else>
                <svg class="icon icon-active" aria-hidden="true">
                  <use :xlink:href="'#icon-'+ item.icon + '-active'"></use>
                </svg>
                <svg class="icon icon-deactive" aria-hidden="true">
                  <use :xlink:href="'#icon-'+ item.icon"></use>
                </svg>
              </template>
            </div>
            <span>{{ item.name }}</span>
          </div>
        </router-link>
      </ul>
    </g-scrollbar>

    <!-- <div v-if="showSidebarConcat" class="sidebar-concat" @click="concatWrapperShow">
            <div class="sidebar-concat-icon">
                <svg class="icon icon-active" aria-hidden="true">
                    <use xlink:href="#icon-contact-color"></use>
                </svg>
            </div>
            <span>联系客服</span>
        </div> -->

  </div>
</template>

<script>
import GScrollbar from "@/components/common/g-scrollbar";
import "static/meiqia.js";

let menu = [
  {
    name: "服务中心",
    key: "resourceCenter",
    icon: "doc",
    show: "resourceCenter"
  },
  {
    name: "数据资源",
    key: "data",
    icon: "data-color",
    show: "data_source"
  },
  {
    name: "我的项目",
    key: "project",
    icon: "project-color",
    show: "my_projects"
  },
  {
    name: "应用管理",
    key: "appstore",
    icon: "app-manage-color",
    show: "app_manage"
  },
  // {
  //     name: '我的组织',
  //     key: 'group',
  //     icon:'group-color',
  //     show: 'group'
  // },
  // {
  //   name: "程序开发",
  //   key: "develop",
  //   icon: "develop-color",
  //   show: "develop"
  // },
  {
    name: "资源统计",
    key: "resource",
    icon: "resource-color",
    show: "resource"
  }
  // {
  //   name: "资源注册",
  //   key: "resourceReg",
  //   icon: "resourceReg-color",
  //   show: "resourceReg"
  // },
  // {
  //   name: "数据加工",
  //   key: "workOrder",
  //   icon: "workOrder-color",
  //   show: "workOrder"
  // }
];

let toggleHandler;

export default {
  name: "sidebar",
  props: {
    state: {
      type: String
    }
  },
  data() {
    let componentConf =
      this.$root && this.$root.componentConf ? this.$root.componentConf : null;

    let isOrgAdmin = !!this.$root.org && this.$root.org.orgUid;

    if (!isOrgAdmin) {
      menu = menu.filter(n => n.key !== "group");
    }

    return {
      menu,
      // selected: this.$route.name ? this.$route.name.toLowerCase() : null,
      selected: this.getSelectedMenu(),
      showSidebarConcat: componentConf
        ? componentConf.contact_customer_service
        : true,
      componentConf: componentConf,
      isOrgAdmin,
      logo: require("../../../assets/ningbo_logo.jpg"),
      platformName: "我的空间",
      backendENV: this.$root.geohey.backend_env
    };
  },
  watch: {
    $route: {
      deep: true,
      handler(val) {
        this.selected = this.getSelectedMenu();
      }
    }
  },
  computed: {
    sidebarStyle() {
      return {
        width: (this.open ? 180 : 60) + "px"
      };
    },

    path() {
      return this.backendENV === "ONLINE" ? "/?go" : "/home/#/main";
    }
  },
  mounted() {
    // window.setTimeout(() => {
    //   if (window["page"] && window["page"].logo && window["page"].logo !== "") {
    //     this.logo = window["page"].logo;
    //   } else {
    //     this.logo = require("../../../../static/img/ningbo_logo.jpg");
    //   }
    //   if (window["page"] && window["page"].name && window["page"].name !== "") {
    //     this.platformName = window["page"].name;
    //   } else {
    //     this.platformName = "我的门户";
    //   }
    // });
  },
  methods: {
    getSelectedMenu() {
      let route = this.$route;
      let path = route.path;

      if (!path) return null;

      let father = path.split("/")[1].toLowerCase();

      return father;
    },

    select(key) {
      if (key === this.selected) return;
      this.selected = key;

      this.$emit("on-change");
    },

    concatWrapperShow() {
      _MEIQIA("showPanel");
    }
  },
  components: {
    GScrollbar
  }
};
</script>

<style lang="scss">
@import "common";

$side-bar-text-padding-left: 60px;

.sidebar {
  position: relative;
  float: left;
  left: 0;
  top: 0;
  width: 163px;
  height: 100%;
  background-color: #f6f8fb;
  border-right: 1px solid $bdGray;
  transition: all 0.15s;
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
  z-index: 1001;

  &.folded {
    width: 70px;

    span {
      display: none;
    }

    .sidebar-header-title {
      visibility: hidden;
    }
  }

  .sidebar-menu-content {
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 45px;

    .g-scrollbar-scrollbar-vertical {
      display: none;
    }
  }

  .sidebar-header {
    padding: 36px 0;

    .sidebar-header-logo {
      width: 100%;
      text-align: center;
      cursor: pointer;

      > a {
        background-color: #fff;
        // display: inline-block;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;

        width: 60px;
        height: 60px;
        @include box-shadow(
          0 0 20px 3px rgba(167, 167, 167, 0.36),
          0 0 10px 2px rgba(208, 208, 208, 0.23)
        );

        > img {
          height: 96%;
          width: auto;
        }
      }
    }

    .sidebar-header-title {
      width: 100%;
      text-align: center;

      > div {
        font-size: $fontSizeHuge;
        color: $dark;
        margin-top: 16px;
        font-weight: 500;
      }
    }
  }

  .sidebar-menu {
    width: 100%;
    .sidebar-menu-item {
      width: 100%;
      color: $deepGray;
      background-color: transparent;
      transition: all 0.3s;

      &.selected {
        .sidebar-menu-item-label {
          background-color: $info !important;
          color: $white !important;
          font-weight: 500;
        }

        .sidebar-menu-item-label-icon {
          .icon-active {
            display: inline-block !important;
          }
          .icon-deactive {
            display: none !important;
          }
        }
      }

      &:hover {
        .sidebar-menu-item-label {
          background-color: #e6ebed;
        }
      }

      .sidebar-menu-item-label {
        display: block;
        width: 100%;
        height: 52px;
        line-height: 52px;
        padding-left: $side-bar-text-padding-left;
        position: relative;
        cursor: pointer;
        transition: all 0.3s;

        > span {
          font-size: $fontSizeBase;
        }
      }

      .sidebar-menu-item-label-icon {
        width: 30px;
        height: 30px;
        line-height: 32px;
        text-align: center;
        position: absolute;
        top: 50%;
        margin-top: -15px;
        left: 24px;

        .icon {
          font-size: 18px;
        }

        .icon-active {
          display: none;
        }
      }
    }
  }

  .sidebar-concat {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 45px;
    line-height: 45px;
    // border-bottom: 1px solid $bdGray;
    padding-left: $side-bar-text-padding-left;
    background-color: #f6f8fb;
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      background-color: #e6ebed;
    }

    .sidebar-concat-icon {
      font-size: 18px;
      width: 30px;
      height: 30px;
      line-height: 32px;
      text-align: center;
      position: absolute;
      top: 50%;
      margin-top: -15px;
      left: 24px;
      color: $primary;
    }

    > span {
      color: $dark;
      font-size: 14px;
    }
  }
}
</style>
